<template>
  <!-- 组织架构 -->
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div class="main-top-title">
          <el-tabs>
            <el-tab-pane label="组织架构" />
          </el-tabs>
        </div>
        <div class="tree-card">
          <!-- 标题行列布局 tree-tools组件 -->
          <div class="treeCon">
            <tree-tools
              :tree-node="company"
              :is-root="true"
              @addDepts="addDepts"
            />
          </div>
          <!-- 树形组件  data:树形组件的数据 props:配置选项 -->
          <el-tree
            :data="departs"
            :props="defaultProps"
            :default-expand-all="true"
            :expand-on-click-node="false"
          >
            <!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
            <!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据   data 每个节点的数据对象-->
            <tree-tools
              slot-scope="{ data }"
              :tree-node="data"
              @addDepts="addDepts"
              @delDepts="getDepartments"
              @editDepts="editDepts"
            />
          </el-tree>
        </div>
      </el-card>
    </div>
    <!-- 放置新增/编辑弹层组件  -->
    <add-dept
      ref="addDept"
      :show-dialog.sync="showDialog"
      :tree-node="node"
      @addDepts="getDepartments"
      @changeDialog="showDialog = false"
    />
  </div>
</template>

<script>
import { getDepartments } from '@/api/departments' // 企业部门列表数据
import { tranListToTreeData } from '@/utils/index.js' // 引入数据转换方法
import TreeTools from './components/tree-tools.vue' // 引入树形组件组件
import AddDept from './components/add-dept' // 引入添加子部门/编辑部门弹层组件
export default {
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      company: {}, // 头部数据
      departs: [], // 树形数据
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容
      },
      showDialog: false, // 新增部门弹出层显隐
      node: null, // 当前点击的部门
      loading: false // 用来控制进度弹层的显示和隐藏
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    // 获取树形组件数据
    async getDepartments() {
      this.loading = true
      const res = await getDepartments()
      this.company = { name: res.companyName, manager: '负责人', id: '' } // 头部组件数据
      this.departs = tranListToTreeData(res.depts, '') // 处理后的数据
      this.loading = false
    },
    // 点击添加子部门
    addDepts(node) {
      this.showDialog = true
      this.node = node
    },
    // 编辑部门
    editDepts(node) {
      // 首先打开弹层
      this.showDialog = true
      this.node = node // 赋值操作的节点
      // 父组件 调用子组件的方法
      this.$refs.addDept.getDepartDetail(node.id) // 直接调用子组件中的方法 传入一个id
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
  min-width: 600px;
}
.treeCon {
  border-bottom: 1px solid #cfcfcf;
  /* padding: 5px 0; */
  margin-bottom: 10px;
}
.main-top-title {
  padding: 20px 0 0 50px;
  text-align: left;
}
</style>
